<template>
  <div class="flex justify-center">
    <img alt="Vue logo" class="app-img" src="@/assets/logo.png" />
  </div>
  <div class="grid-1 padding-bottom">
    <div class="cont flex justify-center align-center">grid布局</div>
  </div>

  <div class="grid-2 padding-bottom">
    <div class="cont flex justify-center align-center">{{ store.state.current }}</div>
    <div class="cont flex justify-center align-center" @click="currentRandom">点击改变随机数</div>
  </div>

  <div class="grid-3 padding-bottom">
    <div class="grid-item flex-inline justify-center align-center" v-for="item in 9" :key="item"
      >{{ item }}
    </div>
  </div>

  <div class="grid-4 grid-row-gap-xs padding-bottom">
    <div class="grid-item flex-inline justify-center align-center" v-for="item in 12" :key="item"
      >{{ item }}
    </div>
  </div>

  <div class="grid-5 grid-column-gap-xs padding-bottom">
    <div class="grid-item flex-inline justify-center align-center" v-for="item in 15" :key="item"
      >{{ item }}
    </div>
  </div>

  <div class="grid-6 grid-gap-xs padding-bottom">
    <div class="grid-item flex-inline justify-center align-center" v-for="item in 18" :key="item"
      >{{ item }}
    </div>
  </div>

  <div class="grid-7 padding-bottom">
    <div class="grid-item flex-inline justify-center align-center" v-for="item in 21" :key="item"
      >{{ item }}
    </div>
  </div>
</template>

<!-- Ctrl+Alt+L格式化代码 -->
<script setup lang="ts">
  import { ref } from 'vue';
  import { useStore } from 'vuex';

  const msg = ref('hello world');
  const store = useStore();
  const currentRandom = () => {
    store.commit('SET_CURRENT', parseInt((Math.random() * 900 + 100).toString()));
  };
</script>

<style lang="less" scoped="">
  .app-img {
    width: 100px;
  }

  .grid-item {
    height: 40px;
    border: 1px solid #2d552b;
    background: #60d659;
  }

  .cont {
    height: 40px;
    border: 1px solid #2d552b;
    background: #60d659;
  }
</style>
